import { BaseMenu } from './BaseMenu';
import { MenuConfig } from '../MenuManager';
import { SkinSystem } from '../SkinSystem';

interface SkinInfo {
    id: string;
    name: string;
    description: string;
}

export class SkinShopMenu extends BaseMenu {
    private skinSystem: SkinSystem;
    private skinScrollOffset: number = 0;
    private selectedSkin: string | null = null;
    private readonly SKINS_PER_PAGE = 4;

    constructor(config: MenuConfig, skinSystem: SkinSystem) {
        super(config);
        this.skinSystem = skinSystem;
    }

    public render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void {
        const skins = this.skinSystem.getAvailableSkins();
        const currentSkin = this.skinSystem.getCurrentSkin();

        // 设置皮肤卡片的尺寸和布局
        const cardWidth = Math.min(250, canvas.width * 0.2);
        const cardHeight = cardWidth * 1.4;
        const spacing = 20;
        const visibleSkins = skins.slice(this.skinScrollOffset, this.skinScrollOffset + this.SKINS_PER_PAGE);
        const startX = (canvas.width - (cardWidth * Math.min(visibleSkins.length, this.SKINS_PER_PAGE) + 
            spacing * (Math.min(visibleSkins.length, this.SKINS_PER_PAGE) - 1))) / 2;
        const startY = (canvas.height - cardHeight) / 2;

        // 绘制返回按钮
        this.drawBackButton(ctx);

        // 绘制标题
        ctx.fillStyle = this.theme.textColor;
        ctx.font = 'bold 32px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('选择皮肤', canvas.width / 2, startY - 50);

        // 渲染皮肤卡片
        visibleSkins.forEach((skin, index) => {
            const x = startX + (cardWidth + spacing) * index;
            const y = startY;
            this.drawSkinCard(ctx, x, y, cardWidth, cardHeight, skin, skin.id === currentSkin);
        });
        
        // 绘制确认按钮
        if (this.selectedSkin) {
            const confirmButtonWidth = 120;
            const confirmButtonHeight = 40;
            const confirmButtonX = canvas.width / 2 - confirmButtonWidth / 2;
            const confirmButtonY = startY + cardHeight + 40;
            
            // 绘制按钮背景
            ctx.fillStyle = '#4CAF50';
            ctx.strokeStyle = '#FFFFFF';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.roundRect(confirmButtonX, confirmButtonY, confirmButtonWidth, confirmButtonHeight, 5);
            ctx.fill();
            ctx.stroke();
            
            // 绘制按钮文本
            ctx.fillStyle = '#FFFFFF';
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('确认选择', confirmButtonX + confirmButtonWidth / 2, confirmButtonY + confirmButtonHeight / 2);
        }
    }

    public handleClick(x: number, y: number, canvas: HTMLCanvasElement): string | null {
        // 检查返回按钮点击
        if (this.isBackButtonClicked(x, y)) {
            return 'back';
        }

        const skins = this.skinSystem.getAvailableSkins();
        const visibleSkins = skins.slice(this.skinScrollOffset, this.skinScrollOffset + this.SKINS_PER_PAGE);

        const cardWidth = Math.min(250, canvas.width * 0.2);
        const cardHeight = cardWidth * 1.4;
        const spacing = 20;
        const startX = (canvas.width - (cardWidth * Math.min(visibleSkins.length, this.SKINS_PER_PAGE) + 
            spacing * (Math.min(visibleSkins.length, this.SKINS_PER_PAGE) - 1))) / 2;
        const startY = (canvas.height - cardHeight) / 2;

        // 检查皮肤卡片点击
        for (let i = 0; i < visibleSkins.length; i++) {
            const cardX = startX + (cardWidth + spacing) * i;
            if (x >= cardX && x <= cardX + cardWidth &&
                y >= startY && y <= startY + cardHeight) {
                this.selectedSkin = visibleSkins[i].id;
                return null; // 不切换菜单，只选中皮肤
            }
        }

        // 检查确认按钮点击
        if (this.selectedSkin) {
            const confirmButtonWidth = 120;
            const confirmButtonHeight = 40;
            const confirmButtonX = canvas.width / 2 - confirmButtonWidth / 2;
            const confirmButtonY = startY + cardHeight + 40;
            
            if (x >= confirmButtonX && x <= confirmButtonX + confirmButtonWidth &&
                y >= confirmButtonY && y <= confirmButtonY + confirmButtonHeight) {
                this.skinSystem.applySkin(this.selectedSkin as SkinType);
                return 'back'; // 选择完成后返回
            }
        }

        return null;
    }

    public handleScroll(deltaY: number): void {
        const skins = this.skinSystem.getAvailableSkins();
        const maxOffset = Math.max(0, skins.length - this.SKINS_PER_PAGE);
        this.skinScrollOffset = Math.min(Math.max(0, 
            this.skinScrollOffset + (deltaY > 0 ? 1 : -1)), maxOffset);
    }

    public update(deltaTime: number): void {
        // 皮肤商店可能不需要更新逻辑
    }

    private drawSkinCard(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, skin: SkinInfo, isCurrentSkin: boolean): void {
        // 绘制卡片背景
        ctx.fillStyle = this.theme.backgroundColor;
        ctx.strokeStyle = skin.id === this.selectedSkin ? this.theme.highlightColor : (isCurrentSkin ? '#4CAF50' : this.theme.borderColor);
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.roundRect(x, y, width, height, 10);
        ctx.fill();
        ctx.stroke();

        // 绘制皮肤预览
        const previewSize = width * 0.8;
        const previewX = x + (width - previewSize) / 2;
        const previewY = y + 20;

        // 根据皮肤类型渲染不同效果
        this.drawSkinPreview(ctx, previewX, previewY, previewSize, skin.id);

        // 绘制皮肤名称
        ctx.fillStyle = this.theme.textColor;
        ctx.font = 'bold 18px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(skin.name, x + width / 2, y + height - 60);

        // 绘制皮肤描述
        ctx.font = '14px Arial';
        ctx.fillText(skin.description, x + width / 2, y + height - 30);
    }

    private drawSkinPreview(ctx: CanvasRenderingContext2D, x: number, y: number, size: number, skinId: string): void {
        switch(skinId) {
            case 'default':
                // 经典绿色
                ctx.fillStyle = '#4CAF50';
                ctx.beginPath();
                ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
                ctx.fill();
                break;
                
            case 'neon':
                // 霓虹渐变
                const neonGradient = ctx.createLinearGradient(
                    x, y,
                    x + size, y + size
                );
                neonGradient.addColorStop(0, '#ff00ff');
                neonGradient.addColorStop(0.5, '#00ffff');
                neonGradient.addColorStop(1, '#ff00ff');
                
                ctx.fillStyle = neonGradient;
                ctx.shadowColor = 'rgba(255,0,255,0.5)';
                ctx.shadowBlur = 15;
                ctx.beginPath();
                ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
                ctx.fill();
                ctx.shadowBlur = 0;
                break;
                
            case 'metal':
                // 金属条纹
                const metalGradient = ctx.createLinearGradient(
                    x, y,
                    x + size, y + size
                );
                metalGradient.addColorStop(0, '#B0BEC5');
                metalGradient.addColorStop(0.25, '#ECEFF1');
                metalGradient.addColorStop(0.5, '#B0BEC5');
                metalGradient.addColorStop(0.75, '#ECEFF1');
                metalGradient.addColorStop(1, '#B0BEC5');
                
                ctx.fillStyle = metalGradient;
                ctx.shadowColor = 'rgba(176,190,197,0.7)';
                ctx.shadowBlur = 10;
                ctx.beginPath();
                ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
                ctx.fill();
                ctx.shadowBlur = 0;
                break;

            case 'spots':
                // 动态斑点
                ctx.fillStyle = '#8BC34A';
                ctx.beginPath();
                ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
                ctx.fill();
                
                // 添加斑点
                ctx.fillStyle = '#FFEB3B';
                const spotRadius = size / 15;
                
                // 斑点1
                ctx.beginPath();
                ctx.arc(x + size / 2 - size / 6, 
                            y + size / 2 - size / 6, 
                            spotRadius, 0, Math.PI * 2);
                ctx.fill();
                
                // 斑点2
                ctx.beginPath();
                ctx.arc(x + size / 2 + size / 8, 
                            y + size / 2 + size / 8, 
                            spotRadius, 0, Math.PI * 2);
                ctx.fill();
                
                // 斑点3
                ctx.beginPath();
                ctx.arc(x + size / 2 + size / 5, 
                            y + size / 2 - size / 7, 
                            spotRadius, 0, Math.PI * 2);
                ctx.fill();
                break;
                
            case 'ghost':
                // 半透明幻影
                ctx.globalAlpha = 0.3;
                ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
                ctx.shadowColor = 'rgba(255,255,255,0.5)';
                ctx.shadowBlur = 15;
                ctx.beginPath();
                ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
                ctx.fill();
                
                // 添加边框以增强视觉效果
                ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                ctx.lineWidth = 1;
                ctx.stroke();
                
                ctx.globalAlpha = 1;
                ctx.shadowBlur = 0;
                break;
                
            default:
                // 默认样式
                ctx.fillStyle = '#4CAF50';
                ctx.beginPath();
                ctx.arc(x + size / 2, y + size / 2, size / 3, 0, Math.PI * 2);
                ctx.fill();
                break;
        }
    }

    private drawBackButton(ctx: CanvasRenderingContext2D): void {
        const backButtonX = 50;
        const backButtonY = 50;

        ctx.fillStyle = this.theme.textColor;
        ctx.strokeStyle = this.theme.borderColor;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(backButtonX, backButtonY, 30, 0, Math.PI * 2);
        ctx.fill();
        ctx.stroke();

        // 绘制返回箭头
        ctx.beginPath();
        ctx.moveTo(backButtonX + 10, backButtonY);
        ctx.lineTo(backButtonX - 10, backButtonY);
        ctx.lineTo(backButtonX - 5, backButtonY - 5);
        ctx.moveTo(backButtonX - 10, backButtonY);
        ctx.lineTo(backButtonX - 5, backButtonY + 5);
        ctx.strokeStyle = '#FFFFFF';
        ctx.stroke();
    }

    private isBackButtonClicked(x: number, y: number): boolean {
        const backButtonX = 50;
        const backButtonY = 50;
        return Math.sqrt(Math.pow(x - backButtonX, 2) + Math.pow(y - backButtonY, 2)) <= 30;
    }
}